.container-fluid {
  display: flex;
  height: calc(100vh - 100px);
  width: 100%;
  background: #f8f9fa;
  padding: 0;
  overflow: hidden;
}

/* 题目描述区域 */
.left-panel {
  flex-shrink: 0;  /* ✅ 禁止弹性收缩 */
  flex-grow: 0;    /* ✅ 禁止弹性扩张 */
  width: 30%;
  background: white;
  overflow-y: auto;
  border-radius: 15px;
}

/* 代码区域 */
.right-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  /*background: white;*/
  width: 100%;
  overflow-x: hidden;
}

/* 拖动条（垂直方向） */
.vertical-resizer {
  width: 3px;
  cursor: ew-resize;
  background: #ccc;
  margin: 5px;
}

.vertical-resizer:hover {
  background: #74affd;
}

/* 拖动条（水平方向） */
.horizontal-resizer {
  height: 2px;
  cursor: ns-resize;
  background: #ccc;
  margin: 5px;
}

.horizontal-resizer:hover {
  background: #74affd;
}

.editor {
  flex-grow: 1;
  height: 300px;
  width: 100%;
}

.code-editor-container {
  background-color: white;
  overflow: hidden;
  width: 100%;
}

/* 在组件样式中添加 */
.code-output {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  overflow: hidden;
  flex-grow: 1;


  .output-header {
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e9ecef;

    .tabs {
      button {
        padding: 8px 16px;
        border: none;
        background: none;
        color: #666;
        cursor: pointer;
        border-radius: 4px;
        margin-right: 8px;
        transition: all 0.2s;

        &.active {
          background: #fff;
          color: #1890ff;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        &:hover {
          background: #f0f2f5;
        }
      }
    }

    .run-button {
      background: #1890ff;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
      margin-left: 8px;

      &:hover {
        background: #40a9ff;
      }

      &:active {
        background: #096dd9;
      }

      &:disabled {
        background: #bfbfbf;
        cursor: not-allowed;
      }
    }
  }

  .output-content {
    flex-grow: 1;
    background: white;
    min-height: 200px;
    padding: 16px;

    .test-cases {
      .custom-input-section {
        background: #fafafa;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 16px;

        textarea {
          width: 100%;
          resize: vertical;
          min-height: 100px;
          font-family: monospace;
        }
      }

      .sample-cases {
        .case-item {
          padding: 12px;
          border: 1px solid #eee;
          margin-bottom: 8px;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.2s;

          &.active {
            border-color: #1890ff;
            background: #e6f7ff;
          }

          .case-title {
            font-weight: 500;
            margin-bottom: 4px;
          }

          .case-input {
            color: #666;
            font-size: 0.9em;
            font-family: monospace;
          }
        }
      }
    }

    .test-result {
      .test-results-list {
        .test-result-item {
          margin-bottom: 16px;
          border: 1px solid #eee;
          border-radius: 4px;
          overflow: hidden;

          .result-header {
            padding: 8px 12px;
            background: #fafafa;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .result-status {
              font-weight: 500;
              color: #ff4d4f;

              &.success {
                color: #52c41a;
              }
            }

            .result-time {
              color: #666;
              font-size: 0.9em;
            }
          }

          pre {
            margin: 0;
            padding: 12px;
            background: #fafafa;
            font-family: monospace;
            white-space: pre-wrap;
            word-break: break-all;

            &.success {
              color: #52c41a;
              background: #f6ffed;
              border: 1px solid #b7eb8f;
            }
          }
        }
      }

      .single-test-result {
        border: 1px solid #eee;
        border-radius: 4px;
        overflow: hidden;

        .result-header {
          padding: 8px 12px;
          background: #fafafa;
          border-bottom: 1px solid #eee;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .result-status {
            font-weight: 500;
            color: #ff4d4f;

            &.success {
              color: #52c41a;
            }
          }
        }

        pre {
          margin: 0;
          padding: 12px;
          background: #fafafa;
          font-family: monospace;
          white-space: pre-wrap;
          word-break: break-all;

          &.success {
            color: #52c41a;
            background: #f6ffed;
            border: 1px solid #b7eb8f;
          }
        }
      }
    }
  }
}

.room-actions {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.room-actions input {
  padding: 6px 10px;
  margin-bottom: 10px;
  width: 160px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.room-buttons button {
  margin-right: 10px;
}

.room-message {
  margin-top: 10px;
  color: #555;
}

.remote-cursor-label {
  background: #ff4081;
  color: white;
  padding: 1px 4px;
  font-size: 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99;
  transition: opacity 0.3s ease;
}

/* 不同用户颜色（你可以按 clientId 动态生成 class） */
.remote-alice {
  background: #ff4081;
}
.remote-bob {
  background: #3f51b5;
}
.remote-charlie {
  background: #4caf50;
}

/* ACE编辑器断点样式 */
.ace_breakpoint {
  background: #e74c3c !important;
  position: relative;
  z-index: 20;
}

.ace_gutter-cell.ace_breakpoint {
  background: #e74c3c !important;
  color: white !important;
  border-radius: 50% !important;
  position: relative !important;
  text-align: center !important;
  font-weight: bold !important;
}

.ace_gutter-cell.ace_breakpoint::before {
  content: "●";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  z-index: 21;
}

/* 当前调试行高亮 */
.ace_current_debug_line {
  background: rgba(255, 255, 0, 0.3) !important;
  position: absolute;
  z-index: 10;
}

/* 断点悬停效果 */
.ace_gutter-cell:hover {
  background: rgba(231, 76, 60, 0.2) !important;
  cursor: pointer;
}

/* 确保gutter有足够的宽度显示断点 */
.ace_gutter {
  min-width: 40px !important;
}

.ace_gutter-cell {
  padding: 0 8px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

/* 调试器面板样式 */
.debugger-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: #1e1e1e;
  color: #d4d4d4;
  border-left: 1px solid #3c3c3c;
  transition: right 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
}

.debugger-panel.visible {
  right: 0;
}




